<template>
  <view class="smart-page">
    <!--页面标题头begin-->
    <view class="smart-page-head">
      <view class="smart-page-head-title">input输入控件</view>
    </view>
    <!--页面标题头end-->
    <view>
      <view>可自动获取焦点</view>
      <view><input class="smart-input" focus="true" placeholder="请输入手机号" /></view>
    </view>

    <view>
      <view>右下角显示搜索</view>
      <view><input class="smart-input" confirm-type="search" placeholder="输入要搜索的内容" /></view>
    </view>

    <view>
      <view>控制最大输入长度</view>
      <view><input class="smart-input" maxlength="5" confirm-type="search" placeholder="请输入内容" /></view>
    </view>
    <view>
      <view>密码输入</view>
      <view><input class="smart-input" password="true" confirm-type="search" placeholder="请输入内容" /></view>
    </view>
	<view>
		<view>可查看密码</view>
		<view class="wrapper">
			<input class="smart-input":password="showPassword" placeholder="请输入密码">
			<image class="eye" src="../../../static/eye.png" @click="changePassword()"></image>
		</view>
	</view>
	
	 <view>
		  <view>同步获取</view>
		  <view><input class="smart-input" @input="onKeyInput"></view>
		  <view><text>{{inputValue}}</text></view>
		  </view>
		  </view>
	</template>
	
	<script>
	export default {
	  data() {
	    return {
	      showPassword: true,
	      inputValue: ''
	    }
	  },
	  methods: {
	    /*显示隐藏密码*/
	    changePassword() {
	      console.log('点击.....');
	      this.showPassword = !this.showPassword;
	    },
	    /*输入事件*/
	    onKeyInput(event) {
	      console.log(event.detail.value);
	      this.inputValue = event.detail.value;
	    }
	  }
	}
	</script>

<script>
</script>

<style>
.eye{
	width: 74upx;
	height: 74upx;
}
.wrapper{
	display: flex;
}
</style>
